<template>
	<view>
		<view class="box_tip" v-if="showPerfectTip">
			您的简历完整度较低，严重影响求职质量，建议您立即完善
		</view>
		<view class="content_wrapper">
			<!-- <view class="box_1" v-if="parseInt(basic.stick) === 0 && !showPerfectTip" @click="handleTips">
				简历不出众? 快来试试简历置顶，立即提高5倍曝光率!
			</view> -->
			<view class="box_2" v-if="moduleStore.basic!==undefined && moduleStore.basic.is_display == 1">
				<view class="name_group">
					<view :class="parseInt(basic.sex) === 1 ? 'avatar_box' : 'avatar_box fe'">
						<image :src="basic.photo_img_src" :alt="basic.fullname"></image>
					</view>
					<view class="edit" @click="handleClick('/personal/EditBasic')"></view>
					<view class="name">{{ basic.fullname }}</view>
					<view class="info">
						{{ basic.age }}岁 · {{ basic.experience_text }} ·
						{{ basic.education_text }}
					</view>
				</view>
				<view class="tx1">{{ contact.mobile }}</view>
				<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
				<view class="tx2"
					v-if="fieldRule.contact.weixin!==undefined && fieldRule.contact.weixin.is_display == 1">
					{{ contact.weixin?contact.weixin:'未填写' }}
				</view>
				<!-- #endif -->
				<view class="percent">完整度: {{ basic.complete_percent }}%</view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<view class="content_wrapper">
			<!--求职意向-->
			<view class="box_3" v-if="moduleStore.intention!==undefined && moduleStore.intention.is_display == 1">
				<view class="box_head">
					<view class="txt">求职意向</view>
					<view class="required">必填</view>
					<view class="add_ico" @click="handleJump('/personal/EditIntention?id=',0)">
					</view>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" @click="showPickerCurrent = !showPickerCurrent">
						求职状态
						<view class="right_txt">{{ currentName }}</view>
					</view>
					<u-picker v-model="showPickerCurrent" mode="selector" :range="columnsCurrent"
						:default-index="currentDefaultIndex" range-key="text" @confirm="onConfirmCurrent"
						@cancel="showPickerCurrent = false" />

					<view class="tx2" v-for="(item, index) in intentionList" :key="index"
						@click="handleJump('/personal/EditIntention?id=',item.id)">
						<view class="name">
							[{{ item.district_text }}] {{ item.category_text }}
						</view>
						<view class="intent">
							{{ item.wage_text }}，{{ item.nature_text }}
							{{ fieldRule.intention.trade.is_display == 1 && item.trade_text !== '' ? `，${item.trade_text}` : '' }}
						</view>
					</view>
				</view>
			</view>
			<!--特长标签-->
			<view class="box_4" v-if="moduleStore.tag!==undefined && moduleStore.tag.is_display == 1">
				<view class="box_head">
					<view class="txt">特长标签</view>
					<view class="add_ico" @click="handleClick('/personal/EditTags')"></view>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tag-item" v-for="(item, index) in basic.tag_text_arr" :key="index">
						{{ item }}
					</view>
					<view class="clear"></view>
				</view>
			</view>
			<!--自我描述-->
			<view class="box_5" v-if="moduleStore.specialty!==undefined && moduleStore.specialty.is_display == 1">
				<view class="box_head">
					<view class="txt">自我描述</view>
					<view class="edit_ico" @click="handleClick('/personal/EditSpecialty')"></view>
					<view class="clear"></view>
				</view>
				<view class="box_content">{{ basic.specialty }}</view>
			</view>
			<!--教育经历-->
			<view class="box_6" v-if="moduleStore.education!==undefined && moduleStore.education.is_display == 1">
				<view class="box_head">
					<view class="txt">教育经历</view>
					<view class="required">必填</view>
					<view class="add_ico" @click="handleJump('/personal/EditEducation?id=',0)">
					</view>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in educationList" :key="index"
						@click="handleJump('/personal/EditEducation?id=',item.id)">
						<view class="t1">{{ item.school }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{ parseInt(item.todate) === 0 ? dateFormat(item.endtime) : "至今" }}
						</view>
						<view class="t3" v-if="fieldRule.education.major.is_display == 1">{{ item.major }}</view>
					</view>
				</view>
			</view>
			<!--工作经历-->
			<view class="box_7" v-if="moduleStore.work!==undefined && moduleStore.work.is_display == 1">
				<view class="box_head">
					<view class="txt">工作经历</view>
					<view class="required">必填</view>
					<view class="add_ico" @click="handleJump('/personal/EditWorks?id=',0)"></view>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in workList" :key="index"
						@click="handleJump('/personal/EditWorks?id=',item.id) ">
						<view class="t1">{{ item.companyname }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{ parseInt(item.todate) === 0 ? dateFormat(item.endtime) : "至今" }}
						</view>
						<view class="t3">{{ item.jobname }}</view>
						<view class="t4">{{ item.duty }}</view>
					</view>
				</view>
			</view>
			<!--培训经历-->
			<view class="box_8" v-if="moduleStore.training!==undefined && moduleStore.training.is_display == 1">
				<view class="box_head">
					<view class="txt">培训经历</view>
					<view class="add_ico" @click="handleJump('/personal/EditTrain?id=',0)"></view>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in trainingList" :key="index"
						@click="handleJump('/personal/EditTrain?id=',item.id)">
						<view class="t1">{{ item.agency }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{ parseInt(item.todate) === 0 ? dateFormat(item.endtime) : "至今" }}
						</view>
						<view class="t3">{{ item.course }}</view>
						<view class="t4">{{ item.description }}</view>
					</view>
				</view>
			</view>
			<!--项目经历-->
			<view class="box_9" v-if="moduleStore.project!==undefined && moduleStore.project.is_display == 1">
				<view class="box_head">
					<view class="txt">项目经历</view>
					<view class="add_ico" @click="handleJump('/personal/EditProject?id=',0)">
					</view>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in projectList" :key="index"
						@click="handleJump('/personal/EditProject?id=',item.id)">
						<view class="t1">{{ item.projectname }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{ parseInt(item.todate) === 0 ? dateFormat(item.endtime) : "至今" }}
						</view>
						<view class="t3">{{ item.role }}</view>
						<view class="t4">{{ item.description }}</view>
					</view>
				</view>
			</view>
			<!--获得证书-->
			<view class="box_10" v-if="moduleStore.certificate!==undefined && moduleStore.certificate.is_display == 1">
				<view class="box_head">
					<view class="txt">获得证书</view>
					<text class="add_ico" @click="handlerCertificateAdd"></text>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in certificateList" :key="index"
						@click="handleJump('/personal/EditCertificate?id=',item.id)">
						{{ item.name }}
						<view class="right_txt">{{ dateFormat(item.obtaintime) }}</view>
					</view>
				</view>
			</view>
			<!--语言能力-->
			<view class="box_11" v-if="moduleStore.language!==undefined && moduleStore.language.is_display == 1">
				<view class="box_head">
					<view class="txt">语言能力</view>
					<text class="add_ico" @click="handlerLanguageAdd"></text>
					<view class="clear"></view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in languageList" :key="index"
						@click="handleJump('/personal/EditLanguage?id=',item.id)">
						{{ item.language_text }}，{{ item.level_text }}
					</view>
				</view>
			</view>
			<!--我的作品-->
			<view class="box_12" v-if="moduleStore.img!==undefined && moduleStore.img.is_display == 1">
				<view class="box_head">
					<view class="txt">我的作品</view>
					<view class="clear"></view>
				</view>
				<view class="box_content clearfix">
					<view class="img_item" v-for="(item, index) in imgList" :key="index">
						<image :src="item.img_src" alt="item.title" class="img" @click="previewImg(index)"></image>
						<view class="audit_bg" v-if="parseInt(item.audit) !== 1">
							{{ item.audit_text }}
						</view>
						<view class="delete_ico" @click="handleDelModal(item.id)"></view>
					</view>
					<!-- :after-read="uploadImg"  -->
					<view class="img_item" v-if="imgList.length < 6">
						<u-upload :custom-btn="true" :deletable="false" :show-progress="false" :show-upload-list="false"
							:action="uploadUrl" :multiple="false"
							:header="{ 'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform }"
							:max-size="(1024 * 1024) * fileupload_size"
							:limitType="['png', 'jpg', 'jpeg', 'bmp', 'gif']" @on-change="successImg"
							@on-choose-complete="onChooseComplete" @on-error="handleUploadError"
							@on-oversize="handleOversize">
							<view slot="addBtn" class="img_item for_upload">添加图片</view>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="box_13">
				<u-button type="primary" shape="circle" @click="handleClick('/personal/ResumePreview')">
					预览简历
				</u-button>
			</view>
		</view>
		<view v-if="!showMoreBar" class="fixed_more" @click="showMoreBar = !showMoreBar"></view>
		<view v-if="showMoreBar" class="fixed_more_open">
			<view class="ic1" @click="refreshResume">刷新</view>
			<view class="ic3" @click="handlePrivacySetting">
				隐私
			</view>
			<view class="ic4" @click="showMoreBar = !showMoreBar"></view>
		</view>
		<u-modal v-model="showCloseResume" title="简历设置" show-cancel-button>
			<view class="box_log_privacy">
				<view class="self_remind">
					简历设置为关闭后企业将无法搜索到您的简历哦
				</view>
				<view class="check_wrapper">
					<u-radio-group v-model="radio" direction="horizontal">
						<u-radio name="1" icon-size="34rpx">公开</u-radio>
						<u-radio name="2" icon-size="34rpx">关闭</u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-modal>
		<u-mask :show="uploading">
			<view class="loading_box">
				<u-loading type="flower" size="60rpx"></u-loading>
				<view> 正在上传... </view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="delModal" title="提示" show-cancel-button content="确定删除该作品吗" @confirm="deleteImg"
			@cancel="delModal=false"></u-modal>
		<CustomerModal ref="CustomerModal"></CustomerModal>
	</view>
</template>

<script>
	import handlerHttpError from '@/utils/error'
	import http from '@/utils/http'
	import api from '@/api'
	import {
		mapState
	} from 'vuex'
	import CustomerModal from '@/components/CustomerModal.vue'
	export default {
		name: 'EditResume',
		components: {
			CustomerModal
		},
		data() {
			return {
				delModal: false,
				uploading: false,
				uploadUrl: getApp().globalData.baseURL + api.resume_img_save,
				radio: 1,
				imgList: [],
				previewImgList: [],
				showCloseResume: false,
				showMoreBar: false,
				current: '',
				currentName: '',
				showPickerCurrent: false,
				currentDefaultIndex: 0,
				showPerfectTip: true,
				moduleStore: {}
			}
		},
		computed: {
			...mapState({
				userToken: state => state.userToken,
				platform: state => state.platform,
				fileupload_size: state => state.config.fileupload_size / 1024
			}),
			basic() {
				return this.$store.state.resume.basic ? this.$store.state.resume.basic : {}
			},
			contact() {
				return this.$store.state.resume.contact
			},
			intentionList() {
				return this.$store.state.resume.intention_list
			},
			educationList() {
				return this.$store.state.resume.education_list
			},
			workList() {
				return this.$store.state.resume.work_list
			},
			trainingList() {
				return this.$store.state.resume.training_list
			},
			projectList() {
				return this.$store.state.resume.project_list
			},
			certificateList() {
				return this.$store.state.resume.certificate_list
			},
			languageList() {
				return this.$store.state.resume.language_list
			},
			columnsCurrent() {
				return this.$store.state.classifyCurrent
			},
			siteConfig() {
				return this.$store.state.config
			},
			fieldRule() {
				return this.$store.state.resume.field_rule
			}
		},
		created() {
			console.log(this.$store.state,'this.$store.state')
			this.$store.dispatch('getClassify', 'current')
		},
		onShow() {
			this.initInfo()
		},
		methods: {
			handleJump(path, id) {
				uni.navigateTo({
					url: path + id
				})
			},
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			handleTips() {
				this.$refs.CustomerModal.getCustomer()
			},
			handlePrivacySetting() {
				uni.navigateTo({
					url: '/personal/PrivacySetting?privacyType=' + 'resumeState'
				})
			},
			// 初始化数据
			initInfo() {
				http
					.get(api.editResume)
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							if (res.data === null) {
								handlerHttpError({
									code: 50007,
									message: '请先添加一份简历'
								})
								return
							}
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', res.data.data.basic)
							// 更新简历模块列表
							this.$store.dispatch('setModuleList', res.data.data.module_list)
							this.moduleStore = res.data.data.module_list
							// 更新简历字段列表
							this.$store.dispatch('setFieldList', res.data.data.field_rule)
							// 更新联系方式
							this.$store.dispatch('setResumeContact', res.data.data.contact)
							// 更新简历求职意向
							this.$store.dispatch('setIntentionList', res.data.data.intention_list)
							// 更新简历工作经历
							this.$store.dispatch('setWorkList', res.data.data.work_list)
							// 更新简历教育经历
							this.$store.dispatch('setEducationList', res.data.data.education_list)
							// 更新简历项目经历
							this.$store.dispatch('setProjectList', res.data.data.project_list)
							// 更新简历培训经历
							this.$store.dispatch('setTrainingList', res.data.data.training_list)
							// 更新简历语言能力
							this.$store.dispatch('setLanguageList', res.data.data.language_list)
							// 更新简历获得证书
							this.$store.dispatch('setCertificateList', res.data.data.certificate_list)
							// 更新简历作品
							this.$store.dispatch('setResumeImgList', res.data.data.img_list)
							// 当前求职状态
							this.current = this.basic.current
							this.currentName = this.basic.current_text
							// 作品
							if (this.$store.state.resume.img_list.length) {
								this.imgList = this.$store.state.resume.img_list
								this.setPreviewImgList()
							}
							// 恢复求职状态
							if (this.columnsCurrent.length) {
								this.currentDefaultIndex = this.columnsCurrent.findIndex(item => {
									parseInt(item.id) === parseInt(this.basic.current)
								})
							}

							// 是否出现继续完善简历提示和是否显示引导置顶简历
							this.showPerfectTip = parseInt(this.basic.complete_percent) < parseInt(this.siteConfig
								.apply_job_min_percent)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 选择求职状态
			onConfirmCurrent(index) {
				this.current = this.columnsCurrent[index].id
				this.currentName = this.columnsCurrent[index].text
				this.showPickerCurrent = !this.showPickerCurrent
				http
					.post(api.resume_current_save, {
						current: this.current
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: '成功修改求职状态',
								type: 'success'
							})
							let currentBasic = this.$store.state.resume.basic
							currentBasic.current = this.current
							currentBasic.current_text = this.currentName
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', currentBasic)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 格式化日期
			dateFormat(time) {
				time = new Date(time * 1000)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				return `${year}-${month}`
			},
			// 作品上传
			successImg(data, index, lists, name) {
				let res = JSON.parse(data.data)
				if (parseInt(res.code) === 200) {
					this.uploading = false
					this.$refs.uTips.show({
						title: res.message,
						type: 'success'
					})
					this.imgList.push({
						audit: res.data.audit,
						audit_text: res.data.audit_text,
						id: res.data.id,
						img: res.data.file_id,
						img_src: res.data.file_url
					})
					// 更新简历作品
					this.$store.dispatch('setResumeImgList', this.imgList)
					this.setPreviewImgList()
				} else {
					this.uploading = false
					this.$refs.uTips.show({
						title: res.message,
						type: 'error'
					})
				}
			},
			onChooseComplete(lists, name) {
				if (lists.length > 0) {
					this.uploading = true
				}
			},
			// 删除作品
			handleDelModal(id) {
				this.delModal = true
				this.delId = id
			},
			deleteImg() {
				// 确定按钮
				http
					.post(api.resume_img_delete, {
						id: this.delId
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							this.imgList.splice(
								this.imgList.findIndex(
									item => parseInt(item.id) === parseInt(this.delId)
								),
								1
							)
							// 更新简历作品
							this.$store.dispatch('setResumeImgList', this.imgList)
							this.setPreviewImgList()
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 预览作品
			previewImg(index) {
				uni.previewImage({
					urls: this.previewImgList,
					indicator: 'number',
					current: index
				})
			},
			// 更新预览图片
			setPreviewImgList() {
				this.previewImgList = this.imgList.map(function(item) {
					return item.img_src
				})
			},
			// 刷新简历
			refreshResume() {
				http
					.post(api.resume_refresh)
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			handlerCertificateAdd() {
				if (this.certificateList.length >= 6) {
					this.$refs.uTips.show({
						title: '最多可以添加6份证书',
						type: 'error'
					})
				} else {
					uni.navigateTo({
						url: '/personal/EditCertificate?id=' + 0
					})
				}
			},
			handlerLanguageAdd() {
				if (this.certificateList.length >= 6) {
					this.$refs.uTips.show({
						title: '最多可添加6种语言',
						type: 'error'
					})
				} else {
					uni.navigateTo({
						url: '/personal/EditLanguage?id=' + 0
					})
				}
			},
			/**
			 * logo 上传失败回调函数
			 * */
			handleUploadError(error) {
				this.uploading = false
			},
			handleOversize() {
				uni.showToast({
					title: "图片最大不能超过" + this.fileupload_size + "M",
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading_box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.box_tip {
		width: 100%;
		font-size: 24rpx;
		color: #ff6600;
		position: relative;
		padding: 21rpx 0 21rpx 66rpx;
		background-image: $remind_ico;
		background-color: #fffbeb;
		background-position: 26rpx 22rpx;
		background-repeat: no-repeat;
		background-size: 30rpx;
	}

	.box_log_privacy {
		padding: 30rpx 0 60rpx 0;
		width: 600rpx;
		margin: 0 auto;

		.check_wrapper {
			font-size: 32rpx;
			color: #666666;
			text-align: center;
			width: 380rpx;
			margin: 0 auto;
			padding-top: 60rpx;

			.u-radio--horizontal:not(:last-child) {
				margin-right: 150rpx;
			}

			.u-radio--horizontal:last-child {
				margin-right: 0;
			}
		}

		.self_remind {
			width: 100%;
			color: #ff6600;
			font-size: 24rpx;
			border-radius: 8rpx;
			padding: 28rpx 0 28rpx 66rpx;
			background-image: $remind_ico;
			background-color: #fffbeb;
			background-repeat: no-repeat;
			background-position: 26rpx center;
			background-size: 32rpx;
		}
	}

	.fixed_more_open {
		.ic4 {
			width: 90rpx;
			padding: 24rpx 0 50rpx;
			border-radius: 90rpx;
			position: relative;

			&::after {
				position: absolute;
				left: 39rpx;
				top: 24rpx;
				width: 12rpx;
				height: 12rpx;
				border-bottom: 2rpx solid #1787fb;
				border-right: 2rpx solid #1787fb;
				transform: rotate(45deg);
				content: " ";
			}
		}

		.ic3 {
			font-size: 22rpx;
			padding-top: 46rpx;
			margin-bottom: 4rpx;
			display: block;
			background-image: $fixed_more_open_ys;
			background-position: center 0;
			background-repeat: no-repeat;
			background-size: 40rpx;
			color: #1787fb;
		}

		.ic2 {
			font-size: 22rpx;
			padding-top: 40rpx;
			margin-bottom: 30rpx;
			display: block;
			background-image: $fixed_more_open_top;
			background-position: center 0;
			background-repeat: no-repeat;
			background-size: 32rpx;
			color: #1787fb;
		}

		.ic1 {
			font-size: 22rpx;
			padding-top: 40rpx;
			margin-bottom: 30rpx;
			background-image: $fixed_more_open_refresh;
			background-position: center 0;
			background-repeat: no-repeat;
			background-size: 32rpx;
		}

		position: fixed;
		right: 50rpx;
		bottom: 300rpx;
		z-index: 3;
		box-shadow: 0 0 10rpx #c2c2c2;
		color: #1787fb;
		width: 90rpx;
		border-radius: 90rpx;
		padding: 40rpx 0 0;
		text-align: center;
		background-color: #ffffff;
		overflow: hidden;
	}

	.fixed_more {
		position: fixed;
		right: 50rpx;
		bottom: 300rpx;
		z-index: 2;
		box-shadow: 0 0 10rpx #c2c2c2;
		background-image: $resume_fixed_more_ico;
		background-color: #fff;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 46rpx;
		width: 74rpx;
		height: 74rpx;
		border-radius: 100%;
	}

	.box_13 {
		width: 600rpx;
		margin: 0 auto;
		padding-bottom: 90rpx;
	}

	.box_12 {
		width: 100%;

		.box_content {
			.img_item {
				&.for_upload {
					margin: 0;
					padding-top: 134rpx;
					text-align: center;
					font-size: 28rpx;
					color: #c0c0c0;
					background-image: url(./static/img/upload_add_ico.png);
					background-color: #f8f8f8;
					background-repeat: no-repeat;
					background-position: center 40rpx;
					background-size: 64rpx;
				}

				.delete_ico {
					&::before {
						position: absolute;
						left: 10rpx;
						top: 19rpx;
						width: 20rpx;
						border-top: 2rpx solid #ffffff;
						content: " ";
						transform: rotate(45deg);
					}

					&::after {
						position: absolute;
						left: 19rpx;
						top: 10rpx;
						height: 20rpx;
						border-right: 2rpx solid #ffffff;
						content: " ";
						transform: rotate(45deg);
					}

					position: absolute;
					right: -12rpx;
					top: -12rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					z-index: 2;
					background-color: rgba(0, 0, 0, 0.5);
				}

				.audit_bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 200rpx;
					color: #c0c0c0;
					font-size: 30rpx;
					background-color: rgba(0, 0, 0, 0.75);
					z-index: 1;
				}

				.img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					border: 0;
				}

				&:nth-of-type(3n) {
					margin-right: 0;
				}

				float: left;
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				margin: 0 40rpx 40rpx 0;
			}

			padding-bottom: 60rpx;
		}
	}

	.box_11 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.right_txt {
					position: absolute;
					right: 40rpx;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 28rpx;
					color: #666666;
				}

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 14rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				font-size: 30rpx;
				color: #333333;
				position: relative;
				display: block;
				padding-right: 60rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_10 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.right_txt {
					position: absolute;
					right: 40rpx;
					top: 4rpx;
					font-size: 26rpx;
					color: #666666;
				}

				&:not(:last-child) {
					margin-bottom: 34rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 16rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 1rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				font-size: 30rpx;
				color: #333333;
				position: relative;
				display: block;
				padding-right: 160rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_9 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.t4 {
					line-height: 1.8;
					font-size: 24rpx;
					color: #666666;
					padding-top: 16rpx;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 94rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				&:not(:last-child) {
					margin-bottom: 34rpx;
				}

				padding-right: 50rpx;
				display: block;
				position: relative;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_8 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.t4 {
					line-height: 1.8;
					font-size: 24rpx;
					color: #666666;
					padding-top: 16rpx;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 94rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				&:not(:last-child) {
					margin-bottom: 34rpx;
				}

				padding-right: 50rpx;
				display: block;
				position: relative;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_7 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.t4 {
					line-height: 1.8;
					font-size: 24rpx;
					color: #666666;
					padding-top: 16rpx;
					word-break: break-all;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 94rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				&:not(:last-child) {
					margin-bottom: 34rpx;
				}

				padding-right: 50rpx;
				display: block;
				position: relative;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_6 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 18rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 66rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				&:not(:last-child) {
					margin-bottom: 34rpx;
				}

				padding-right: 50rpx;
				display: block;
				position: relative;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_5 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			padding-bottom: 30rpx;
			line-height: 1.8;
			font-size: 26rpx;
			color: #666666;
			word-break: break-all;
		}
	}

	.box_4 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			padding-bottom: 4rpx;

			.tag-item {
				float: left;
				padding: 9rpx 24rpx;
				font-size: 24rpx;
				color: #1787fb;
				margin: 0 20rpx 20rpx 0;
				background-color: #f4f9ff;
				border-radius: 52rpx;
			}
		}
	}

	.box_3 {
		.tx2 {
			.intent {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.name {
				font-size: 30rpx;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 19rpx;
			}

			&::after {
				position: absolute;
				right: 12rpx;
				top: 40rpx;
				width: 12rpx;
				height: 12rpx;
				border-top: 2rpx solid #666666;
				border-right: 2rpx solid #666666;
				transform: rotate(45deg);
				content: " ";
			}

			padding-right: 50rpx;
			margin-top: 35rpx;
			display: block;
			position: relative;
		}

		.tx1 {
			.right_txt {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translate(0, -50%);
				font-size: 26rpx;
				color: #666666;
			}

			&::after {
				position: absolute;
				right: 12rpx;
				top: 16rpx;
				width: 12rpx;
				height: 12rpx;
				border-top: 2rpx solid #666666;
				border-right: 2rpx solid #666666;
				transform: rotate(45deg);
				content: " ";
			}

			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			position: relative;
		}

		.box_content {
			padding-bottom: 30rpx;
		}

		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.box_head {
		.edit_ico {
			position: absolute;
			right: -30rpx;
			top: 20rpx;
			height: 100rpx;
			width: 100rpx;
			background-image: $resume_edit_ico;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 32rpx;
		}

		.add_ico {
			position: absolute;
			right: -30rpx;
			top: 20rpx;
			height: 100rpx;
			width: 100rpx;
			background-image: $resume_add_ico;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 32rpx;
		}

		.u-tag {
			padding: 0 20rpx;
		}

		.required {
			float: left;
			font-size: 18rpx;
			font-weight: bold;
			color: #ff5757;
			border: 2rpx solid #ff5757;
			padding: 0 6rpx;
			margin: 12rpx 0 0 10rpx;
		}

		.txt {
			float: left;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			margin-right: 6rpx;
		}

		position: relative;
		width: 100%;
		padding: 45rpx 0;
	}

	.box_2 {
		.tx2 {
			font-size: 24rpx;
			color: #333333;
			padding: 5rpx 0 5rpx 46rpx;
			background-image: url($ImgUrl + "resume_wx_ico.png");
			background-position: 0 center;
			background-repeat: no-repeat;
			background-size: 33rpx 32rpx;
		}

		.tx1 {
			font-size: 24rpx;
			color: #333333;
			padding: 5rpx 0 5rpx 46rpx;
			margin-bottom: 10rpx;
			background-image: url($ImgUrl + "resume_phone_ico.png");
			background-position: 0 center;
			background-repeat: no-repeat;
			background-size: 33rpx 32rpx;
		}

		.percent {
			position: absolute;
			right: -34rpx;
			bottom: 32rpx;
			color: #ff5d24;
			font-size: 26rpx;
			padding: 14rpx 18rpx 14rpx 32rpx;
			background-color: #f3f3f3;
			border-radius: 36rpx 0 0 36rpx;
		}

		.name_group {
			.edit {
				position: absolute;
				right: 0;
				top: 12rpx;
				width: 72rpx;
				height: 52rpx;
				background-image: $resume_edit_ico;
				background-position: center 5rpx;
				background-repeat: no-repeat;
				background-size: 26rpx;
			}

			.avatar_box {
				&.fe::after {
					content: " ";
					position: absolute;
					right: -6rpx;
					bottom: 6rpx;
					width: 26rpx;
					height: 26rpx;
					border-radius: 100%;
					background-image: $female;
					background-color: #ff4d94;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 20rpx;
				}

				&::after {
					content: " ";
					position: absolute;
					right: -6rpx;
					bottom: 6rpx;
					width: 26rpx;
					height: 26rpx;
					border-radius: 100%;
					background-image: $male;
					background-color: #50a6fa;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 20rpx;
				}

				image {
					width: 96rpx;
					height: 96rpx;
					border: 0;
					border-radius: 100%;
				}

				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(0, -50%);
				width: 96rpx;
				height: 96rpx;
				border-radius: 100%;
			}

			.info {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.name {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
				padding: 5rpx 0 21rpx 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			position: relative;
			padding: 0 100rpx 0 122rpx;
			margin-bottom: 31rpx;
		}

		padding: 25rpx 0 31rpx;
		position: relative;
	}

	.box_1 {
		width: 100%;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 10rpx;
		padding: 23rpx 40rpx 23rpx 60rpx;
		background-image: url($ImgUrl + "resume_top_tip_bg.png");
		background-color: #fb8a78;
		background-position: 20rpx center;
		background-repeat: no-repeat;
		background-size: 26rpx 28rpx;
		position: relative;
		margin-bottom: 20rpx;

		&::after {
			position: absolute;
			right: 22rpx;
			top: 32rpx;
			width: 14rpx;
			height: 14rpx;
			border-top: 2rpx solid #ffffff;
			border-right: 2rpx solid #ffffff;
			transform: rotate(45deg);
			content: " ";
		}
	}

	.content_wrapper {
		width: 100%;
		background-color: #ffffff;
		padding: 0 34rpx;
	}

	.u-overlay {
		text-align: center;
		z-index: 2;
	}

	.u-loading {
		top: 36%;
	}

	.u-loading__text {
		color: #c3c3c3;
	}
</style>
